<template>
  <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="岗位名称" prop="postName">
        <el-input v-model="ruleForm.postName" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="岗位编码" prop="postCode">
        <el-input v-model="ruleForm.postCode" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="岗位排序" prop="postSort">
        <el-input-number v-model="ruleForm.postSort" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item label="岗位状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio
            v-for="dict in dict.type.sys_normal_disable"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入岗位描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleClose(ruleFormRef)"> 确定 </el-button>
        <el-button type="success" @click="dialogVisible = false"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
  import { getCurrentInstance, onBeforeMount, onMounted, reactive, ref } from 'vue'
  import { reqPostAddUrl, reqPostEditUrl } from '@/api/system/post'

  const { proxy }: any = getCurrentInstance()
  const ruleFormRef = ref<FormInstance>()
  const dialogVisible = ref<boolean>(false)
  const title = ref('新增岗位')
  let $emit = defineEmits(['getPostListPage'])
  const rules = reactive({
    postName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
    postCode: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
    postSort: [{ required: true, message: '岗位顺序不能为空', trigger: 'blur' }],
  })

  /*form表单*/
  const ruleForm = reactive({
    postId: undefined,
    postName: undefined,
    postCode: undefined,
    postSort: '0',
    remark: undefined,
    status: '0',
  })

  /*对话框关闭时的调用*/
  function close() {
    ruleFormRef.value.resetFields() /*表单重置*/
    Object.keys(ruleForm).forEach((key) => {
      if (key === 'postSort') ruleForm[key] = '0'
      else if (key === 'status') ruleForm[key] = '0'
      else ruleForm[key] = null
    })
  }

  const show = async (item: any = {}) => {
    title.value = '新增岗位'
    /*编辑用户的操作*/
    if (item.postId) {
      title.value = '编辑岗位'
      /*表单赋值*/
      Object.keys(item).forEach((key) => {
        console.log(key)
        ruleForm[key] = item[key]
      })
    }
    dialogVisible.value = true
  }

  const handleClose = async (done: () => void) => {
    await ruleFormRef.value.validate(async (valid: any, fields: any) => {
      if (valid) {
        if (!ruleForm.postId) {
          await reqPostAddUrl(ruleForm).then((req: any) => {
            if (req.code === 200) {
              proxy.$modal.msgSuccess('添加成功！')
              dialogVisible.value = false
              $emit('getPostListPage')
            } else {
              proxy.$modal.msgError(req.message != null ? req.message : '添加失败！')
              return
            }
          })
        } else {
          await reqPostEditUrl(ruleForm).then((req: any) => {
            if (req.code === 200) {
              proxy.$modal.msgSuccess('修改成功！')
              dialogVisible.value = false
              $emit('getPostListPage')
            } else {
              proxy.$modal.msgError(req.message != null ? req.message : '修改失败！')
              return
            }
          })
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  defineExpose({
    show,
  })
</script>

<script lang="ts">
  export default {
    dicts: ['sys_normal_disable'],
  }
</script>
<style lang="scss" scoped></style>
